<template>
    <div class="wrap moniReport homechild1">
      <div class="fl">
          <!--标题-->
          <div class="title1">
            <img src="../../static/img/texticon.png" alt="">
            <span class="tspan1" onclick="ind_load_list()">工作动态</span>
            <span class="tspan2"></span>
            <span class="tspan3"></span>
            <a href="javascript:;" class="tspan4" @click="goworklist()">更多&gt;</a>
          </div>
          <!--内容-->
          <ul class="dongtaiList fl">
            <!--带图片-->
            <li v-for="item in workdata" :key="item.id" style="cursor: pointer;" class="lihorver" @click="goworkdetail(item.id)">
              <span class="text">{{item.title}}</span>
              <span class="time">{{item.timeAdd}}</span>
            </li>
          </ul>
        </div>
        <div class="fr">
          <!--标题-->
          <div class="title1">
            <img src="../../static/img/monicon.png" alt="">
            <span class="tspan1">监测报告</span>
            <span class="tspan2"></span>
            <span class="tspan3"></span>
            <a href="javascript:;" class="tspan4" id="jcbg">更多&gt;</a>
          </div>
          <!--内容-->
          <ul class="dongtaiList fl" id="montrends">
            <li v-for="item in mondata" :key="item.id">
              <a target="_blank" download="download" :href='item.fieladdr'>
                <span class="text">{{item.title}}</span>
                <span class="time">{{item.timeAdd}}</span>
                </a>
            </li>
          </ul>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      workdata: [],
      mondata: []
    }
  },
  mounted () {
    this.getworkData()
    this.getmonData()
  },
  methods: {
    goworklist () {
      this.$router.push('work')
    },
    goworkdetail (id) {
      sessionStorage.setItem('workdetailId', id)
      this.$router.push('work')
    },
    getworkData () {
      var self = this
      this.axios.post(this.api + '/monitor/workDynamicsController/showList.do', this.qs.stringify({pagesize: 5, pagenow: 1, state: 2})).then(function (res) {
        if (res.data.msg === 'success') {
          for (var i = 0; i < res.data.data.length; i++) {
            self.workdata.push({
              id: res.data.data[i].id,
              title: res.data.data[i].title,
              timeAdd: self.format(res.data.data[i].timeAdd, 'yyyy-MM-dd')
            })
          }
        }
      })
    },
    getmonData () {
      var self = this
      this.axios.post(this.api + '/monitor/monitorReportController/showList.do', this.qs.stringify({pagesize: 5, pagenow: 1})).then(function (res) {
        if (res.data.msg === 'success') {
          for (var i = 0; i < res.data.data.length; i++) {
            self.mondata.push({
              fieladdr: 'http://file.gcx365.com:8090/' + res.data.data[i].fieladdr,
              title: res.data.data[i].title,
              timeAdd: self.format(res.data.data[i].timeAdd, 'yyyy-MM-dd')
            })
          }
        }
      })
    },
    format (time, format) {
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
          case 'MM':
            return tf(t.getMonth() + 1)
          case 'dd':
            return tf(t.getDate())
        }
      })
    }
  }
}
</script>

<style lang="" scoped>
  .homechild1{
    height: 355px;
  }
  .title1{
    height: 30px;
    line-height: 30px;
  }
  .title1 .tspan1{
    font-size: 20px;
    color: #333333;
    vertical-align: text-bottom;
    margin-left: 10px;
  }
  .title1 .tspan2{
    width: 8px;
    height: 8px;
    margin: 0 10px;
    vertical-align: text-top;
    display: inline-block;
    background-color: #c2c2c2;
    border-radius: 50%;
  }
  .title1 .tspan3{
    margin-bottom: 10px;
    display: inline-block;
    height: 1px;
    width: 340px;
    background-color: #e5e5e5;
  }
  .title1 .tspan4{
    margin-left: 10px;
    font-size: 14px;
    color: #666666;
    vertical-align: top;
  }
  .dongtaiList{
    width: 100%;
  }
  .dongtaiList li{
    height: 50px;
    line-height: 50px;
    color: #333333 !important;
  }

  .dongtaiList li .text{
    font-size: 16px;
    display: inline-block;
    width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dongtaiList li a{
    display: block;
    color: #333;
  }
  .dongtaiList li .time{
    font-size: 14px;
    display: inline-block;
    float: right;
    width: 85px;
  }
  .dongtaiList li a:hover{
    color: #4b87f9 !important;
    cursor: pointer;
  }
  #dt_centent li:hover{
    color: #4b87f9 !important;
    cursor: pointer;
  }
  .lihorver:hover{
    color: #4b87f9 !important;
    cursor: pointer;
  }
</style>
